<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>创建节目</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/css/admin/create_program.css}">
</head>
<body>
<div class="web-page">
    <div class="web-content">
        <div class="web-content-head">
            <div class="head-logo"></div>
            <div class="head-text">创建节目</div>
        </div>
        <div class="web-content-body">
            <div class="scenes-container">
                <div class="app-page-content" style="padding: 0">
                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">搜索模板</div>
                                    <div class="body">
                                        <input name="templateName" type="text" th:value="${templateName}">
                                    </div>
                                </div>
                            </div>
                            <button class="z-btn z-primary" style="background: #3dd49a;border: 0;">搜索</button>

                        </div>
                    </form>
                </div>
                <div class="scenes">
                    <div class="scene-box">
                        <div class="scene" id="default-program-template">
                            <div class="out">
                                <div class="in" id="default-scene">
                                    <div class="scene-content">
                                        <div class="s-default">
                                            <button type="button" id="new"></button>
                                            <p>创建节目</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="scene" data-id="1"
                             th:if="${not #lists.isEmpty(result)}"
                             th:each="template: ${result}"
                             th:attr="data-id=${template.programTemplateId},
                                        data-type=${template.type},
                                        data-json-id=${template.jsonId},
                                        data-name=${template.name},
                                        data-wide=${template.wide},
                                        data-img-url=${template.imgUrl},
                                        data-height=${template.height}">
                            <div class="out">
                                <div class="inside">
                                    <div class="media">
                                        <div class="media-active">
                                            <div class="button-box">
                                                <div class="button-wrap">
                                                    <button type="button" class="edit">创建</button>
                                                    <button type="button" class="delete" th:if="${template.type != 0}">
                                                        删除
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="source">
                                            <img th:src="${#httpServletRequest.getContextPath() + (template.imgUrl == null ? '' : template.imgUrl)}">
                                        </div>
                                    </div>
                                    <div class="media-descuription"><p th:text="${template.name}">默认模板一</p></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="app-card-body">
                <div class="pagination z-pat z-fr"></div>
            </div>
        </div>
    </div>
</div>
<div class="popup-edit popup-default z-popup z-fixed z-df z-flex-cc z-hide">
    <div class="bg" data-popup-close=""></div>
    <div class="body">
        <div class="title">创建节目</div>
        <div class="content">
            <form>
                <div class="form-item row">
                    <div class="label">
                        <label>节目名称</label>
                    </div>
                    <div class="body">
                        <input type="text" name="programName" data-name="节目名称" data-rule="required" maxlength="32" readonly>
                        <input type="hidden" name="programTemplateId" data-name="模板id"/>
                    </div>
                </div>
                <div class="form-item row">
                    <div class="label">
                        <label>节目尺寸</label>
                    </div>
                    <div class="body">
                        <select name="programResolution" data-name="节目尺寸" data-rule="required">
                            <option th:each="sc:${screenCanvasMappingList}"
                                    th:value="${sc.screenWidth} + '*' + ${sc.screenHeight}"
                                    th:text="${sc.screenWidth} + '*' + ${sc.screenHeight}">

                            </option>
                        </select>
                    </div>
                </div>
            </form>
            <div class="z-btn-group">
                <a class="btn-submit z-btn z-primary">确定</a>
                <a class="z-btn z-default" data-popup-close="">取消</a>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/model.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script>

    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var templateName = '[[${templateName}]]';
    var token = '[[${token}]]';
    var clientDomain = '[[${clientDomain}]]';

    function reSize() {
        var right = $(".out").eq(0).css("margin-right");
        $(".z-pat")[0].style.paddingRight = right;
        $(".app-page-content")[0].style.paddingLeft = right;
    }

    $(function () {

        reSize();
        $(window).resize(reSize);
    })

    //分页
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: 12, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/cpProgram/toAddProgramPage?pageSize=" + pageSize + "&pageNum=" + pageIndex;
            if (!isBlank(templateName)) {
                url = url + "&templateName=" + templateName;
            }
            window.location.href = url;
        }
    })


    // 创建节目 - 弹窗打开
    $('#new').click(function () {
        $('input[name="programTemplateId"]').val('');
        $('select[name="programResolution"]').val('');
        $('select[name="programResolution"]').attr('disabled', false);
        popup.open('.popup-edit');
    })

    //编辑
    $('.edit').click(function () {
        var dataset = $(this).parents('.scene')[0].dataset;
        var tempId = dataset.id;
        var type = dataset.type;
        var wide = dataset.wide;
        var height = dataset.height;
        if (!isBlank(wide) && !isBlank(height)) {
            $('select[name="programResolution"]').val(wide + '*' + height);
        }
        $('input[name="programTemplateId"]').val(tempId);
        $('select[name="programResolution"]').attr('disabled', true);
        popup.open('.popup-edit');
    })

    // 创建节目 - 弹窗确定
    var form = $(".popup-edit form").form({
        submitSelector: ".popup-edit .btn-submit",
        msg: function (msg) {
            popup.tipsTop(msg, 'warning');
        },
        submit: function () {

            var data = {};
            var programName = $('input[name="programName"]').val();
            var programTemplateId = $('input[name="programTemplateId"]').val();
            var programResolution = $('select[name="programResolution"]').val();

            data['programName'] = programName;
            data['programTemplateId'] = programTemplateId;
            data['programResolution'] = programResolution;

            var flag = false;
            var programId = null;
            $.ajax({
                type: "POST",
                url: context + "/cpProgram/saveProgram",
                data: data,
                dataType: "json",
                async: false,
                success: function (result) {
                    if (result.code == 0) {
                        $('input[name="programTemplateId"]').val();
                        $('select[name="programResolution"]').val();
                        popup.close('.popup-edit');
                        flag = true;
                        programId = result.data;
                    } else {
                        popup.tipsTop(result.msg, 'warning');
                    }
                },
                error: function (result) {
                    popup.tipsTop('系统错误，请联系管理员', 'error');
                }
            });
            if(flag){
                var win = window.open('about:blank', '_blank');
                win.location = clientDomain + "?programId=" + programId + "&token=" + token;
            }
        }
    })


    $('.delete').click(function () {
        var dataset = $(this).parents('.scene')[0].dataset;
        if (confirm("确定删除吗？")) {
            $.ajax({
                type: "POST",
                url: context + "/programTemplate/delete",
                data: {
                    programTemplateId: dataset.id
                },
                dataType: "json",
                success: function (result) {
                    if (result.code == 0) {
                        popup.tipsTop('删除模板成功', 'success');
                        setTimeout(function () {
                            var url = context + "/cpProgram/toAddProgramPage?pageSize=" + pageSize;
                            if (!isBlank(templateName)) {
                                url = url + "?templateName=" + templateName;
                            }
                            window.location.href = url;
                        }, 500);
                    } else {
                        popup.tipsTop(result.msg, 'warning');
                    }
                },
                error: function (result) {
                    popup.tipsTop('系统错误，请联系管理员', 'error');
                }
            });
        }
    })

    function isBlank(param) {
        if (null == param) {
            return true;
        }
        if ('' === param) {
            return true;
        }
        return undefined === param;
    }
    function initForm() {
        $("input[name=programName]").click(function () {
            $(this)[0].readOnly=false;
        })
            .blur(function () {
                $(this)[0].readOnly=true;
            })
    }
    initForm();
</script>
</body>
</html>